// $translucent-red: rgba(255, 0, 0, 0.5);
.vue3-modal {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 1000;
  .modal-bg {
    background-color: #000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    opacity: 0.5;
  }
  .modal-main {
    position: absolute;
    width: 350px;
    
    // height: 200px;
    background: #fff;
    // padding: 20px;
    left: 50%;
    // top: 50%;
    top: 100px;
    transform: translateX(-50%);
    border-radius: 6px;
    // box-shadow:0 1px 3px rgb(0 0 0 / 30%);
    header{
      // border: 1px solid #000;
      // border-bottom: 1px solid #ccc;
      padding: 10px;

    }
    footer{
      // padding: 20px;
      // padding-top: 10px;
      display: flex; 
      flex-direction: row-reverse;
    }
    main{
      padding: 10px;
      color: $main-color;
    }
    footer{
      padding: 10px;
      button{
        margin-left: 10px;
        &:active{
          //   background-color: darken($main-color, 10%);
        }
      }
    }
  }
}
